<template>
    <div>
        <div style="margin-top:2.5rem;">
            <navtop :title="'用户登录'"></navtop>
        </div>
        <div class="loginformContainer">
            <div class="username">
                <mt-field label="用户名" placeholder="请输入用户名" v-model="username"></mt-field>
            </div>
            <div class="password">
                <mt-field label="密码" placeholder="请输入密码" type="password" v-model="password"></mt-field>
            </div>
            <div class="btns">
                <mt-button size="normal" type="primary" @click="login">登录</mt-button>
                <mt-button size="normal" type="primary" @click="register" plain>注册</mt-button>
            </div>
        </div>
    </div>
</template>

<script>
import { Toast } from "mint-ui";
import navtop from "../navtop/nav.vue";
export default {
    data() {
        return {
            username: "",
            password: ""
        };
    },
    methods: {
        // 登录
        login() {
            if (this.username.length > 3 && this.password.length > 3) {
                let postInfos = {
                    username: this.username,
                    password: this.password
                };
                this.$ajax
                    .post("/login/", postInfos)
                    .then(res => {
                        window.localStorage.setItem("token", res.data.token);
                        Toast({
                            message: "登录成功！",
                            position: "top",
                            iconClass: "icon icon-danger"
                        });
                        this.getFav();
                        this.getShopcar();
                        this.getOrder();
                        this.getUserinfos();
                        this.$router.push({ name: "home" });
                    })
                    .catch(err => {
                        if (err.detail == 400) {
                            Toast({
                                message: "用户名或密码错误",
                                position: "top"
                            });
                        }
                    });
            } else {
                Toast({
                    message: "未输入或过短",
                    position: "top",
                    iconClass: "icon icon-danger"
                });
            }
        },
        //注册
        register() {
            this.$router.push({ name: "register" });
        },
        //获取用户收藏夹数据并存入store
        getFav() {
            this.$ajax.get("/fav/").then(res => {
                let favList = res.data.results;
                this.$store.commit("favStore", favList);
            });
        },
        //获取用户购物车数据存入store
        getShopcar() {
            this.$ajax.get("/shopcar/").then(res => {
                this.$store.commit("shopcarStore", res.data.results);
            });
        },
        //获取用户订单数据存入store
        getOrder() {
            this.$ajax.get("/order/").then(res => {
                this.$store.commit("orderStore", res.data.results);
            });
        },
        // 获取用户详细信息存入store
        getUserinfos() {
            this.$ajax.get("/user").then(res => {
                this.$store.commit("userinfosStore", res.data);
            });
        }
    },
    components: {
        navtop
    }
};
</script>

<style lang="scss" scoped>
.loginformContainer {
    margin-top: 30%;
    .username {
        margin-top: 30px;
    }
    .password {
        margin-top: 20px;
    }
    .btns {
        margin-top: 25px;
        display: flex;
        justify-content: space-around;
    }
}
</style>